<template>
	<view class="zone">
		<Header title="幸运值"></Header>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="erweima">
					<image class="gcode" src="http://image.qxgm.site/tdz/img/xinyun/mg-02.png" mode="widthFix"></image>
				</view>

				<view class="yinliang">
					<image src="http://image.qxgm.site/tdz/img/tk/mg-03.png" mode="widthFix"></image>
					<text>{{dealWith(lingshi)}}</text>
				</view>
				<view class="dangqian">
					当前幸运值
				</view>
				<view class="snum">
					{{luckNum}}
				</view>
				<view class="bujingqi">
					<Number placeholder='请输入要提升的数量' v-model="value" size="25px" :min="1" :max="10000" :input-width="400"
						color="#fff">
					</Number>
				</view>
				<view class="stitp">
					1灵石可提升1点幸运值
				</view>
				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="onePress"
					@click="improve">立即提升</u-button>

				<view class="explain">
					<view class="p1">
						幸运值特权
					</view>
					<p>1.提高历练获得极品道具概率</p>
					<p>2.提高装备提升战力成功的概率</p>
					<p>3.提高历练可获得零钱的概率</p>
				</view>

			</view>
		</view>


		<!-- 提升成功 -->
		<u-mask :show="sucessShow">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>提升成功</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<p class="tanp1">恭喜您使用{{value}}灵石提升了</p>
							<p class="tanp2">{{value}}幸运值</p>
						</view>
					</view>
				</view>
				<image class="m_close" @click="sucessShow = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>


		<!-- 提升确认 -->
		<u-mask :show="queren">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>提升确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							您确认要使用{{value}}灵石<br>
							提升<text class="t2">{{value}}幸运值</text>吗？
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">确认提升</u-button>
						<view class="sendtip">
							当前灵石：{{lingshi}}
						</view>

					</view>
				</view>
				<image class="m_close" @click="queren = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				luckNum: '',
				lingshi: '',
				sucessShow: false,
				queren: false,
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 数量过万处理
			dealWith(value) {
				value = Number(value)
				var num;
				if (value > 9999) { //大于9999显示x.xx万
					num = (Math.floor(value / 100) / 100) + '万';
				} else if (value <= 9999 && value > -9999) {
					num = value
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 1000) / 10) + '万'
				}
				return num;
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.luckNum = res.data.luck_num
					this.lingshi = res.data.lingshi
				}
			},
			// 打开确认弹框
			improve() {
				if (this.value == null || this.value == '' || this.value <= 0) {
					this.$u.toast('请输入正确数量')
					return
				}
				this.queren = true
			},
			// 确认提升
			async againCofirm() {
				console.log(this.value);
				let res = await this.$http.index.uplucy({
					num: this.value
				})
				if (res.code == 1) {
					this.getUserInfo();
					this.sucessShow = true
					this.queren = false
				} else {
					this.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;
	}

	.yun {
		position: absolute;
		top: -3%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		position: relative;
		height: calc(100vh - 97px);
		overflow-y: scroll;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 0px 6px 0;
		border-bottom: 6px solid #b0a3a1;
	}

	.yinliang {
		position: absolute;
		width: 24%;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 12px;
		right: 7px;
		background: url(http://image.qxgm.site/tdz/img/xinyun/mg-03.png) no-repeat;
		background-size: 100% 100%;
		height: 20px;

		image {
			position: absolute;
			left: 0;
			top: 0;
			width: 21px;
		}

		text {
			font-size: 14px;
			font-weight: normal;
			color: #fff;
			line-height: 20px;
			margin-left: 21px;
		}
	}

	.ping1 {
		width: 100%;
		display: flex;
	}

	.jihuop {
		font-size: 18px;
		font-weight: normal;
		color: #50433A;
		line-height: 30px;
		padding: 0 20%;

		.t1 {
			color: #ED519F;
		}

		.t2 {
			color: #4587FF;
		}
	}

	.sendtip {
		text-align: center;
		margin-top: 10px;
	}

	.erweima {
		display: block;
		margin: 0 auto;
		width: 57%;
		background: url(http://image.qxgm.site/tdz/img/xinyun/mg-01.png) no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 10% 7%;
	}

	.getLevel {
		display: block;
		margin: 3vh auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.gcode {
		width: 100%;
	}

	.onePress {
		display: block;
		margin: 0 auto;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		line-height: 37px;
		color: #fefbca;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.dangqian {
		font-size: 22px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		text-align: center;
		margin-bottom: 18px;
	}

	.snum {
		font-size: 22px;
		font-weight: normal;
		color: #FF3399;
		line-height: 24px;
		text-align: center;
		margin-bottom: 4vh;
	}

	.bujingqi {
		text-align: center;
		margin: 0 auto;
	}

	.stitp {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		margin-top: 3vh;
		text-align: center;
		margin-bottom: 18px;
	}

	.explain {
		margin: 15px 8px 0;
		background: url(http://image.qxgm.site/tdz/img/xinyun/mg-09.png) no-repeat;
		background-size: 100% 100%;
		padding: 44px 10px 17px;

		p {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 27px;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 13px;
			margin-bottom: 3px;
			padding-left: 15%;
		}
	}

	.p1 {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 18px;
		background: linear-gradient(0deg, #F83F81 1.123046875%, #F47F00 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 13px;
	}

	.tanp1 {
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 24px;
		text-align: center;
		margin-top: 35px;
	}

	.tanp2 {
		font-size: 24px;
		font-weight: normal;
		color: #FF3333;
		line-height: 24px;
		text-align: center;
		margin-top: 25px;
	}
</style>